<template>
  <div>
    <section v-if="NoticeNotDown.length > 0">
      <el-carousel height="55px" direction="vertical" indicator-position="none" style="width: 100%" :autoplay="true">
        <el-carousel-item v-for="item in NoticeNotDown" :key="item.id + '活动'">
          <div class="ts_body">
            <div>
              <i class="el-icon-warning ts_icon"></i>
              <span class="ts_text" v-html="item.content"></span>
            </div>
            <div style="cursor: pointer">
              <i class="el-icon-close ts_icon_close" @click="deleteNotify(item.id)"></i>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>
  </div>
</template>

<script>
import api from "@/api";
export default {
  data() {
    return {
      NoticeNotDown: [],
    };
  },
  mounted() {
    this.getNoticeNotDown();
  },
  methods: {
    getNoticeNotDown() {
      let form = {
        imshowId: this.$store.getters.imShowId,
      };
      api.home.getNoticeNotDown(form).then((res) => {
        this.NoticeNotDown = res.data;
      });
    },
    deleteNotify(id) {
      let form = {
        id: id,
      };
      api.home.setNoticeDown(form).then((res) => {
        this.getNoticeNotDown();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ts_body {
  @include flex(row, center, space-between);
  padding: 8px 16px;
  background: #e7f2fe;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #0c7ff280;
  margin-top: 16px;

  .ts_icon {
    font-size: 14px;
    color: #0c7ff2;
    display: inline-block;
    padding-right: 5px;
  }

  .ts_text {
    font-size: 14px;
    color: #4f5862;
    line-height: 16px;
  }

  .ts_icon_close {
    font-size: 14px;
    color: #0c7ff2;
  }
}
</style>